<template>
  <div class="hexiaoIndex">
    <van-tabs v-model="activeIndex" @click="changeTag" title-active-color="#333333" title-inactive-color="#b1bac8">
      <van-tab :title="`可核销(${total})`">
        <autoHexiaoList
          :couponList="couponList"
          :queryForm.sync="queryForm"
          :total="total"
          :couponTypeOfUrl="couponTypeOfUrl"
          @reloadCouponList="getCouponList"
        />
      </van-tab>
      <van-tab :title="`核销记录(${total2})`">
        <autoHexiaoRecord
          :recordList="recordList"
          :queryForm.sync="queryForm"
          :total="total2"
          :couponTypeOfUrl="couponTypeOfUrl"
          :activeIndex="activeIndex"
          @reloadCouponList="getCouponList"
        />
      </van-tab>
    </van-tabs>

    <div class="bottom">
      <div>更多活动，请关注我们的公众号</div>
      <div>上海深斯能源科技有限公司提供技术支持</div>
    </div>

    <!-- loading -->
    <van-overlay :show="loading">
      <div class="overlay">
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import { Tab, Tabs, Button, Overlay, Loading } from "vant";

import autoHexiaoList from "./autoHexiao_list.vue";
import autoHexiaoRecord from "./autoHexiao_record.vue";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Button);
Vue.use(Overlay);
Vue.use(Loading);

export default {
  components: {
    autoHexiaoList,
    autoHexiaoRecord
  },
  data() {
    return {
      activeIndex: 0,
      couponList: [], // 优惠券列表
      recordList: [], // 核销记录列表
      total: 0,
      total2:0,
      queryForm: {
        pageNum: 1, //第几页
        pageSize: 10, // 容量
        enterpriseId: "",
        stationId: "",
        couponType: 100, // 1 现金劵，2折扣券，3兑换券 4洗车券 100全部
        couponIsUsed: 0, // 0 可使用 1已使用 2已过期  3 核销记录
        mobilePhone: ""
      },
      couponTypeOfUrl: 100, // url上的couponType值
      loading: false,
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  created() {
    this.activeIndex=Number(this.$route.query.activeIndex)||0
    // 判断老用户
    if (!this.userInfo.mobilePhone) {
      getAuthen();
      return false;
    }

    // 获取二维码上携带的优惠券类型
    let currentUrl = window.location;
    let urlObj = this.getUrlParams(currentUrl);
    console.log("url参数", urlObj);

    this.queryForm.couponType = urlObj.couponType;
    this.queryForm.stationId = urlObj.stationId;
    this.couponTypeOfUrl = urlObj.couponType;
    this.changeTag(this.activeIndex)
    // this.getCouponList();
  },
  methods: {
    // 解析url，获取couponType参数
    getUrlParams(url) {
      let typeArr = url.search.replace("?", "").split("&");
      let obj = {};
      typeArr.forEach(item => {
        let objItem = item.split("=");
        obj[objItem[0]] = objItem[1];
      });
      return obj;
    },

    // 切换tab
    async changeTag(activeIndex, title) {
      switch (activeIndex) {
        case 0:
          this.queryForm.pageNum = 1;
          this.queryForm.couponIsUsed = 0;
          this.queryForm.couponType = this.couponTypeOfUrl;
          await this.getCouponList();
          document.title='自助核销'
          break;
        case 1:
          this.queryForm.pageNum = 1;
          this.queryForm.couponIsUsed = 3;
          this.$delete(this.queryForm, "couponType");
          await this.getCouponList();
           document.title='核销记录'
          break;
        default:
          break;
      }
    },

    // 获取优惠券列表
    async getCouponList() {
      this.loading = true;
      this.list=[]
      const params = { ...this.queryForm };
      params.enterpriseId = this.enterpriseId;
      params.mobilePhone = this.phone;
      const res = await this.$axios.$get("/selectUserCoupons", {
        params: params
      });
      console.log("获取优惠券列表", res);
      let couponIsUsed = this.queryForm.couponIsUsed;
      if (res.retCode === 0 && res.data) {
        if (couponIsUsed === 3) {
          this.recordList = res.data.list;
        }

        if (couponIsUsed === 0) {
          this.couponList = res.data.list;
        }

        this.couponList = res.data.list;
        if(this.activeIndex==0){
          this.total = res.data.total;
        }else{
          this.total2=res.data.total
        }
        
      }
      if (res.retCode != 0) {
        alert("拉取优惠券失败了" + res.message);
      }

      this.loading = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.hexiaoIndex {
  position: relative;

  .sbuBtn {
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
    button {
      width: 80%;
    }
  }

  .bottom {
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    text-align: center;
    font-size: 0.22rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 0.32rem;
    letter-spacing: 1px;
  }

  .overlay {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>
